<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/vue.js " type="text/javascript" charset="utf-8"></script>
    <script src="/js/element.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="/css/element.css" />
    <script src="/js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">

    <el-dialog title="缺陷详情" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <div>项目名：{{showIssue.projectName}}</div>
            <div>父级缺陷：{{showIssue.parentIssueId}}</div>
            <div>缺陷名称：{{showIssue.issueName}}</div>
            <div>缺陷分类：{{showIssue.issueType}}      状态：{{showIssue.issueState}}</div>
            <div>严重程度：{{showIssue.issueSeverity}}      优先级：{{showIssue.issuePriority}}</div>
            <div>预计工时：{{showIssue.planWorkHours}}     完成率：{{showIssue.doneRatio}}</div>
            <div>计划开始时间：{{showIssue.planStartTime}}      计划完成时间：{{showIssue.planEndTime}}</div>
            <div>缺陷描述：{{showIssue.issueDesc}}</div>
            <div>缺陷要求：{{showIssue.doneCondition}}</div>
            <div>指派给：
                <el-select v-model="taskAllocationItem.userId" clearable placeholder="请选择">
                    <el-option
                            v-for="item in showUserItems"
                            :label="item.userName"
                            :value="item.userId">
                    </el-option>
                </el-select>
            </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="commit">确定</el-button>
        </div>
    </el-dialog>







    <div>
        筛选查询：
        <span class="demonstration">登记时间：</span>
        <el-date-picker
                v-model="searchItems.planStartTime"
                type="date"
                placeholder="开始日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd">
        </el-date-picker>-
        <span class="demonstration"></span>
        <el-date-picker
                v-model="searchItems.planEndTime"
                type="date"
                placeholder="结束日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
        >
        </el-date-picker>
        项目
        <el-select v-model="taskAllocationItem.userId" clearable placeholder="请选择">
            <el-option
                    v-for="project in projects"
                    :label="project.projectName"
                    :value="project.projectName">
            </el-option>
        </el-select>

        <el-button type="primary" @click="loadpage">查询</el-button>
    </div>
    <div>
        <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="issueId"
                    label="缺陷编号">
            </el-table-column>

            <el-table-column
                    prop="projectName"
                    label="项目名">
            </el-table-column>
            <el-table-column
                    prop="issueName"
                    label="缺陷名">
            </el-table-column>
            <el-table-column
                    prop="parentIssueId"
                    label="上级缺陷">
            </el-table-column>
            <el-table-column
                    prop="issuePriority"
                    label="优先级">
            </el-table-column>
            <el-table-column
                    prop="issueSeverity"
                    label="严重程度">
            </el-table-column>
            <el-table-column
                    prop="issueState"
                    label="状态">
            </el-table-column>
            <el-table-column
                    prop="assignee"
                    label="指派">
            </el-table-column>
            <el-table-column
                    :formatter="formatDate"
                    prop="planEndTime"
                    label="计划完成时间">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <div>
                        <el-button size="mini" @click="open(scope.row)">分配</el-button>
                    </div>
                </template>
            </el-table-column>

        </el-table>

        <div >
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizes"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>

</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            taskAllocationItem:{
                issueId:"",
                userId:""
            },
            showUserItems:[{userId:1,userName:"张三"},{userId:2,userName:"李四"}],
            changeItem:{
                projectId:"",
                parentIssueId:"",
                issueName:"",
                issueDesc: "",
                doneCondition: "",
                issueType: "",
                issueSeverity: "",
                issuePriority: "",
                planWorkHours: "",
                planStartTime:"",
                planEndTime:""
            },
            addItem:{
                projectId:"",
                parentIssueId:"",
                issueName:"",
                issueDesc: "",
                doneCondition: "",
                issueType: "",
                issueSeverity: "",
                issuePriority: "",
                planWorkHours: "",
                planStartTime:"",
                planEndTime:""
            },
            searchItems:{
                planStartTime:"",
                planEndTime: "",
                projectName:"",
                issueState:"未指派"
            },
            currentPage:1,
            pageSizes:[3,6,9,12],
            pageSize:3,
            total:"",
            tableData: [],
            multipleSelection: [],
            projects:[],
            states:[],
            showIssue:{projectName:"",
                parentIssueId:"",
                issueName:"",
                issueType:"",
                issueState:"",
                issueSeverity:"",
                issuePriority:"",
                planWorkHours:"",
                doneRatio:"",
                planStartTime:"",
                planEndTime:"",
                issueDesc:"",
                doneCondition:""
            },
            dialogFormVisible: false,
            issues:[],
            issueType:[],
            severitys:[],
            prioritys:[],
            changeRow:null
        },
        methods:{
            commit(){
                $.post("/commitAllocation",this.taskAllocationItem,function (data) {
                    alert("分配成功");
                })
                this.dialogFormVisible = false
                this.loadpage()
            },
            equalsObj(obj1,obj2){
                return JSON.stringify(obj1)==JSON.stringify(obj2);
            },
            commitChange(){
                var _this = this
                if(_this.equalsObj(_this.changeRow,_this.changeItem)){
                    alert("未做修改");
                }else{
                    if (_this.changeItem.projectId==""){
                        alert("项目名不能为空");
                    }else if (_this.changeItem.issueName==''){
                        alert("缺陷名不能为空");
                    }else{
                        $.get("/checkIssueName",{issueName:this.changeItem.issueName},function (data) {
                            if (data.code=="200"){
                                $.get("/changeBaseInfo",_this.changeItem,function (data) {
                                    _this.dialogFormVisible2=false;
                                    _this.loadpage();
                                })
                            }else{
                                alert("缺陷名重复");
                            }
                        })
                    }
                }
            },
            changeTask(obj){
                this.changeRow=obj;
                this.changeItem=Object.assign({},obj);
                this.dialogFormVisible2=true
            },
            commitAdd(){
                var _this = this
                if (_this.addItem.projectId==""){
                    alert("项目名不能为空");
                }else if (_this.addItem.issueName!=''){
                    $.get("/addBaseInfo",_this.addItem,function (data) {
                        if (data.code=="200"){alert("新增缺陷成功")
                            _this.cleanobj(_this.addItem);
                            _this.dialogFormVisible1=false;
                            _this.loadpage();
                        }
                    })
                }else{
                    alert("缺陷名不能为空");
                }
            },
            addclose(){
                this.cleanobj(this.addItem);
            },
            cancealadd(){
                this.dialogFormVisible1 = false;
                this.cleanobj(this.addItem);
            },
            changeclose(){
                this.cleanobj(this.changeItem);
            },
            cancealchange(){
                this.dialogFormVisible2 = false;
                this.cleanobj(this.changeItem);
            },

            cleanobj(obj){
                for(var key in obj){
                    obj[key]='';
                }
            },
            checkIssueName(){
                var _this = this;
                if (this.addItem.issueName.trim()==""){
                    alert("缺陷名不能为空")
                }else{
                    $.get("/checkIssueName",{issueName:this.addItem.issueName},function (data) {
                        if (data.code=="200"){
                            alert("缺陷名不存在");
                        }else{
                            alert("缺陷名存在");
                            _this.addItem.issueName="";
                        }
                    })
                }
            },
            open(obj){
                var _this = this;
                this.taskAllocationItem.issueId=obj.issueId;
                this.showIssue = obj;
                var planStartTime = this.formatDateForShow(this.showIssue.planStartTime);
                var planEndTime = this.formatDateForShow(this.showIssue.planEndTime);
                this.showIssue.planStartTime = planStartTime;
                this.showIssue.planEndTime = planEndTime;
                //查询项目id,issuetype对应user集合
                $.get("/getuserarray",obj,function (data) {
                       console.log(data);
                       _this.showUserItems=data.object;
                })
                this.dialogFormVisible=true;
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            formatDateForShow(a){
                let  data = a;
                let dt = new Date(data)
                // return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
                return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate();
            },
            formatDate(row) {
                // 获取单元格数据
                let data = row.planEndTime
                let dt = new Date(data)
                return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
            },
            loadpage(){
                var _this = this;
                var items = this.searchItems;
                $.ajax({
                    type: "GET",
                    data: {
                        pageIndex: _this.currentPage, pageSize: _this.pageSize, planStartTime: items.planStartTime,
                        planEndTime: items.planEndTime,
                        projectName: items.projectName,
                        issueState: items.issueState
                    },
                    dataType: "json",
                    url: "/searchBaseInfoList",
                    success: function (data) {
                        console.log(data);
                        _this.tableData=data.object.pagelist;
                        _this.currentPage = data.object.pageindex;
                        _this.pageSize = data.object.pagesize;
                        _this.total = data.object.total;
                    }})
            },
            loadProjects(){
                var _this = this
                $.get("/getAllProjects",function (data) {
                    console.log(data)
                    _this.projects=data.object;
                })
            },
            loadStates(){
                var _this = this
                $.get("/getAllStates",function (data) {
                    _this.states=data.object;
                })
            },
            loadIssues(){
                var _this = this
                $.get("/getAllIssues",function (data) {
                    _this.issues=data.object;
                })
            },
            loadIssueType(){
                var _this = this
                $.get("/getAllType",function (data) {
                    console.log(data)
                    _this.issueType=data.object;
                })
            },
            loadSeveritys(){
                var _this = this
                $.get("/getAllSeveritys",function (data) {
                    console.log(data)
                    _this.severitys=data.object;
                })
            },
            loadPrioritys(){
                var _this = this
                $.get("/getAllPrioritys",function (data) {
                    console.log(data)
                    _this.prioritys=data.object;
                })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(val);
            },
            handleSizeChange(val) {
                this.pageSize=val;
                this.loadpage();
            },
            handleCurrentChange(val) {
                this.currentPage=val;
                this.loadpage();
            }
        },
        mounted(){
            this.loadIssues();
            this.loadIssueType();
            this.loadSeveritys();
            this.loadPrioritys();
            this.loadStates();
            this.loadProjects();
            this.loadpage();
        }
    })
</script>

</body>
</html>